CSS என்றால் என்ன?
CSS என்பது வலைப்பக்கத்தை ஸ்டைல் செய்ய பயன்படும் மொழியாகும்.
CSS என்பது Cascading Style Sheets என்பதன் சுருக்கமாகும்
CSS பண்புகள்:
HTML உறுப்புகள் திரை, காகிதம் அல்லது பிற ஊடகங்களில் எவ்வாறு காட்சிப்படுத்தப்பட வேண்டும் என்பதை CSS விவரிக்கிறது
CSS நிறைய வேலையை மிச்சப்படுத்துகிறது. இது ஒரே நேரத்தில் பல வலைப்பக்கங்களின் அமைப்பைக் கட்டுப்படுத்த முடியும்
வெளிப்புற ஸ்டைல்ஷீட்கள் CSS கோப்புகளில் சேமிக்கப்படுகின்றன
CSS டெமோ - ஒரு HTML பக்கம் - பல ஸ்டைல்ஷீட்கள்!
இங்கே நான்கு வெவ்வேறு ஸ்டைல்ஷீட்களுடன் காட்சிப்படுத்தப்பட்ட ஒரு HTML பக்கத்தைக் காண்பிப்போம். வெவ்வேறு ஸ்டைல்களைக் காண கீழே உள்ள "ஸ்டைல்ஷீட் 1", "ஸ்டைல்ஷீட் 2", "ஸ்டைல்ஷீட் 3", "ஸ்டைல்ஷீட் 4" இணைப்புகளைக் கிளிக் செய்யவும்:
CSS அறிமுக டெமோ
இது ஒரே HTML உள்ளடக்கம். ஆனால் நீங்கள் வெவ்வேறு ஸ்டைல்ஷீட்டுகளைத் தேர்ந்தெடுப்பதன் மூலம் இதன் தோற்றத்தை முழுமையாக மாற்றலாம்.
CSS சக்தி: ஒரே உள்ளடக்கம், வெவ்வேறு வடிவமைப்புகள்!
CSS இல்லாமல், வலைப்பக்கங்கள் வெற்று மற்றும் வடிவமைப்பு இல்லாதவையாக இருக்கும். CSS மூலம் நாம் வண்ணங்கள், எழுத்துருக்கள், இடவெளி, ஏற்பாடு மற்றும் அனிமேஷன்களைச் சேர்க்கலாம்.
CSS எடுத்துக்காட்டு:
/* இது CSS குறியீடு */
.demo-title {
color: blue;
font-size: 24px;
text-align: center;
}
.demo-text {
font-family: Arial, sans-serif;
line-height: 1.6;
}ஸ்டைல்ஷீட் 1
அடிப்படை ஸ்டைல்கள் மற்றும் வடிவமைப்பு
ஸ்டைல்ஷீட் 2
மேம்பட்ட வண்ண திட்டங்கள்
ஸ்டைல்ஷீட் 3
ஏற்பாட்டு மற்றும் லேஅவுட் ஸ்டைல்கள்
ஸ்டைல்ஷீட் 4
முழுமையான தீம் மற்றும் வடிவமைப்பு
ஏன் CSS பயன்படுத்த வேண்டும்?
CSS உங்கள் வலைப்பக்கங்களுக்கான ஸ்டைல்களை வரையறுக்க பயன்படுகிறது, இதில் வடிவமைப்பு, ஏற்பாடு மற்றும் வெவ்வேறு சாதனங்கள் மற்றும் திரை அளவுகளுக்கான காட்சி மாறுபாடுகள் அடங்கும்.
CSS எடுத்துக்காட்டு
body {
background-color: lightblue;
}
h1 {
color: white;
text-align: center;
}
p {
font-family: verdana;
font-size: 20px;
}CSS நிறைய வேலையை மிச்சப்படுத்துகிறது!
CSS வரையறைகள் பொதுவாக வெளிப்புற .css கோப்பில் சேமிக்கப்படுகின்றன.
வெளிப்புற ஸ்டைல்ஷீட் கோப்புடன், நீங்கள் ஒரே ஒரு கோப்பை மாற்றுவதன் மூலம் முழு வலைத்தளத்தின் தோற்றத்தையும் மாற்றலாம்!
பயிற்சி:
CSS ஸ்டைல் விதியின் சரியான தொடரியலைத் தேர்ந்தெடுக்கவும்: